<template>
  <div>
    <el-button @click="drawer = true" type="primary" style="margin-bottom: 20px;">
      添加商品
    </el-button>
    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
      <div class="boxs">
        <div><span>autumn秋日清单</span> <el-input v-model="listobj.autumn"></el-input> <span>autumnList格式 {
            imgurl:"https://img2.baidu.com/it/u=1529656472,4182667521&fm=253&fmt=auto&app=138&f=JPEG?w=630&h=500",
            title:'酸菜鱼火锅', //标题
            good:'1', //收藏
            time:"10-30分钟", //时间或标头
            }</span> <el-input v-model="listobj.autumnList"></el-input></div>
        <div><span>details详细信息可以不写格式:[
            {
            title:"番茄红烩牛肉", //标题
            imgurl:"https://img2.baidu.com/it/u=1529656472,4182667521&fm=253&fmt=auto&app=138&f=JPEG?w=630&h=500",
            grade:'中等', //等级
            time:"30分钟—1小时", //时间
            introduce:"" ,//介绍
            Ingredients:[
            {
            name:"牛肉",
            num:"500克"
            },{
            name:"番茄",
            num:"1个"
            },,{
            name:"洋葱",
            num:"半个"
            },,{
            name:"胡萝卜",
            num:"2个"
            },
            ],
            accessories:[
            {
            name:"姜",
            num:"数量"
            },
            {
            name:"番茄红烩调料",
            num:"数量"
            },
            {
            name:"盐",
            num:"适量"
            },
            {
            name:"糖",
            num:"适量"
            },
            ],
            // 食材选购
            footList:[
            {
            maintitle:'十月稻田稻花香米', //产品标题
            direct:true, //显示优惠
            price:57, //价格
            }
            ],
            //食材清单
            step:[
            {
            steptitle:'第一步',
            img:'https://img2.baidu.com/it/u=1529656472,4182667521&fm=253&fmt=auto&app=138&f=JPEG?w=630&h=500',//图片
            content:'番茄去皮切块，洋葱切块，胡萝卜去皮切片' //内容
            }
            ] // 步骤
            }
            ]</span> <el-input v-model="listobj.details"></el-input></div>
      </div>

      <div style="text-align: center;">
        <el-button>发布</el-button>
      </div>
    </el-drawer>

    <Table :tableData="tableData" :limit="limit" :total="total" :page="page" @del="del" @edit="edit"></Table>
    <el-pagination background layout="prev, pager, next" :total="total" :current-page.sync="page" :page-size.sync="limit"
      @current-change="handleCurrentchange">
    </el-pagination>
  </div>
</template>

<script>
import Table from './table.vue'
export default {
  name: 'list',
  components: {
    Table
  },
  data() {
    return {
      total: 10,
      page: 1,
      limit: 10,
      drawer: false,
      listobj: {
        autumn: "",
        autumnList: '{}',
        details: '[]',
      },
      tableData: [
            {
              id:142,
              title: "番茄红烩牛肉", //标题
              imgurl: "https://img2.baidu.com/it/u=1529656472,4182667521&fm=253&fmt=auto&app=138&f=JPEG?w=630&h=500",
              grade: '中等', //等级
              time: "30分钟—1小时", //时间
              introduce: "",//介绍
            },
            {
              id:1242,
              title: "酱香犬", //标题
              imgurl: "https://img2.baidu.com/it/u=1529656472,4182667521&fm=253&fmt=auto&app=138&f=JPEG?w=630&h=500",
              grade: '中等', //等级
              time: "20分钟—30分钟", //时间
              introduce: "老乡了",//介绍
            },
            {
              id:1412,
              title: "番茄红烩牛肉", //标题
              imgurl: "https://img2.baidu.com/it/u=1529656472,4182667521&fm=253&fmt=auto&app=138&f=JPEG?w=630&h=500",
              grade: '中等', //等级
              time: "30分钟—1小时", //时间
              introduce: "",//介绍
            },
            {
              id:1342,
              title: "酱香犬", //标题
              imgurl: "https://img2.baidu.com/it/u=1529656472,4182667521&fm=253&fmt=auto&app=138&f=JPEG?w=630&h=500",
              grade: '中等', //等级
              time: "20分钟—30分钟", //时间
              introduce: "老乡了",//介绍
            },
            {
              id:1412,
              imgurl: "https://img2.baidu.com/it/u=1529656472,4182667521&fm=253&fmt=auto&app=138&f=JPEG?w=630&h=500",
              title: '酸菜鱼火锅', //标题
              good: '1', //收藏
              time: "10-30分钟", //时间或标头  
            },
            {
              id:14122,
              imgurl: "https://img2.baidu.com/it/u=1529656472,4182667521&fm=253&fmt=auto&app=138&f=JPEG?w=630&h=500",
              title: '酸菜鱼火锅', //标题
              good: '1', //收藏
              time: "10-30分钟", //时间或标头  
            },
            {
              id:12142,
              imgurl: "https://img2.baidu.com/it/u=1529656472,4182667521&fm=253&fmt=auto&app=138&f=JPEG?w=630&h=500",
              title: '酸菜鱼火锅', //标题
              good: '1', //收藏
              time: "10-30分钟", //时间或标头  
            },
            {
              id:14446,
              imgurl: "https://img2.baidu.com/it/u=1529656472,4182667521&fm=253&fmt=auto&app=138&f=JPEG?w=630&h=500",
              title: '酸菜鱼火锅', //标题
              good: '1', //收藏
              time: "10-30分钟", //时间或标头  
            },
          ]
    }
  },
  methods: {
    del(id){
      console.log(id);
    },
    edit(item){
      console.log(1);
      this.listobj.autumnList=JSON.stringify(item)
      console.log(item.good);
      this.listobj.autumn =item.good?'':'秋日食单'
    },
    handleCurrentchange(val) {
      this.page = val
    
      this.total = this.tableData.length
    },


  },

}
</script>

<style lang="scss" scoped></style>